<template>
    <div class="main">
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <!-- <div class="box3 box">盒子三</div> -->
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'



</script>

<script lang="ts">
export default {
  name: "css_style",
};
/* eslint-disable vue/multi-word-component-names */
</script>

<style scoped>
.main{
    width: 300px;
    height:200px;
    background-color: #888888;
    margin: 10px auto;
    position: relative;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    position: fixed;
    top: 50px;
    left: 50px
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    
}
.box3 {
    background-color: rgb(0, 0, 255);
}


</style>